<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/game_hall.css">
    <link rel="stylesheet" href="css/game_room.css">
    <link rel="stylesheet" href="css/pop.css">
    <style>
        /* 添加动画样式 */
        #screen.strong {
            transform: scale(1.05);
            transition: transform 0.3s ease;
            color: #2c3e50;
        }

        #screen.loading::after {
            content: "...";
            animation: dots 1.5s infinite;
        }

        @keyframes dots {
            0%, 20% {
                content: ".";
            }
            40% {
                content: "..";
            }
            60%, 100% {
                content: "...";
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="game-content">
        <!-- 棋盘区域 -->
        <canvas id="chess" width="450px" height="450px"></canvas>

        <!-- 显示区域 -->
        <div id="screen">等待玩家连接中...</div>
    </div>
</div>
<!-- 消息容器 -->
<div class="toast-container"></div>

<script src="js/script.js"></script>
<script src="js/pop.js"></script>

</body>
</html>